<template>
  <div class="h-full bg-white rounded-content-wrap p-5">
    <el-form
      ref="ruleForm"
      v-loading="loading"
      :model="form"
      :rules="rules"
      label-position="left"
      hide--asterisk
    >
      <!-- 上传头像 -->
      <el-form-item label="" prop="iconUrl" class="flex flex-col">
        <template #label>
          <div class="h-[30px]">个人头像</div>
        </template>
        <CustomUpload class="mt-2" :img-list.sync="form.iconUrl" />
      </el-form-item>

      <!-- 账号 -->
      <el-form-item label="" prop="account" class="row-left">
        <template #label>
          <div class="">账号</div>
        </template>
        <el-input v-model="form.account" :disabled="true" placeholder="请输入" />
      </el-form-item>
      <!-- 账号名称 -->
      <el-form-item label="" prop="accountName" class="row-right">
        <template #label>
          <div class="form-label">账号名称</div>
        </template>
        <el-input v-model="form.accountName" placeholder="请输入" />
      </el-form-item>

      <!-- 单位名称 -->
      <el-form-item label="" prop="orgName" class="row-left">
        <template #label>
          <div class="form-label">单位名称</div>
        </template>
        <el-input v-model="form.orgName" disabled placeholder="请输入" />
      </el-form-item>
      <!-- 职位 -->
      <el-form-item label="" prop="position" class="row-right">
        <template #label>
          <div class="form-label">职位</div>
        </template>
        <el-input v-model="form.position" disabled placeholder="请输入" />
      </el-form-item>
      <!-- 微信号 -->
      <!-- <el-form-item label="" prop="wechat" class="row-left">
        <template #label>
          <div class="form-label">微信号</div>
        </template>
        <el-input v-model="form.wechat" placeholder="请输入" />
      </el-form-item> -->
      <!-- 手机号 -->
      <el-form-item label="" prop="phone" class="row-left">
        <template #label>
          <div class="form-label">手机号</div>
        </template>
        <el-input v-model="form.phone" placeholder="请输入" />
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item label="" prop="email" class="row-right">
        <template #label>
          <div class="form-label">邮箱</div>
        </template>
        <el-input v-model="form.email" placeholder="请输入" />
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="" prop="password" class="row-left">
        <template #label>
          <div class="form-label">密码</div>
        </template>
        <el-input v-model="form.password" placeholder="请输入" />
      </el-form-item>
      <!-- 部门信息 -->
      <div class="h1">部门信息</div>
      <!-- 所属部门 -->
      <el-form-item label="" prop="orgName" class="row-left">
        <template #label>
          <div class="form-label">所属部门</div>
        </template>
        <el-input v-model="form.orgName" disabled placeholder="请输入上级姓名" />
      </el-form-item>

      <Save pre-label="取消" :disabled="loading" @onSave="handleSave" />
    </el-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomUpload from '@/components/admin/manage/carrier/common/CustomUpload/index.vue'
import Save from '@/components/admin/manage/portal/common/Save.vue'
import { upsertUser, getCurrentUser, IUpsertUserParams } from '@/api/user'
import { getRoleList } from '@/api/role'
export default Vue.extend({
  components: { CustomUpload, Save },
  data(): {
    loading: boolean
    form: IUpsertUserParams
    rules: Record<string, any>
    roleList: Record<string, any>[]
  } {
    return {
      loading: false,
      form: {
        id: '',
        iconUrl: [],
        account: '',
        accountName: '',
        orgId: '',
        orgName: '',
        position: '',
        wechat: '',
        phone: '',
        email: '',
        password: '',
        roleIds: [],
      },
      rules: {},
      roleList: [],
    }
  },
  head: {
    title: '用户中心',
  },

  async created() {
    const result = await getCurrentUser()
    // @ts-ignore
    this.roleList = await getRoleList()
    this.initForm(result)
    console.log(result)
  },
  methods: {
    initForm(data: any) {
      const { form } = this as any
      Object.keys(form).forEach((key) => {
        const value = data[key]
        if (value) {
          form[key] = value
        }
      })
    },
    handleSave() {
      const { form } = this
      // @ts-ignore
      this.$refs.ruleForm.validate(async (valid: boolean) => {
        if (valid) {
          this.loading = true
          await upsertUser(form as IUpsertUserParams)

          this.$message.success('保存成功！')
          this.loading = false
        }
      })
    },
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
